import { defineComponent } from "vue";

function textHighlight(regexType, searchText): string {
  if (
    regexType !== null &&
    searchText != null &&
    regexType !== "" &&
    searchText != ""
  ) {
    const texts = regexType.split(searchText);
    return texts.map((item, index) => (
      <>
        {item}
        {index < texts.length - 1 && (
          <span class="text-highlight">{searchText}</span>
        )}
      </>
    ));
  } else {
    return regexType;
  }
}

export default defineComponent({
  name: "textHighlight",
  props: {
    content: {
      type: String
    },
    searchText: {
      type: String
    }
  },
  data() {
    return {};
  },
  methods: {},
  setup(props) {
    return () => <>{textHighlight(props.content, props.searchText)}</>;
  }
});
